<template>
  <div >
    <el-row>
      <el-col :span="10" style="height: 500px;width: 600px;overflow-y: scroll;">
        <el-row v-for="(ele,index) in buyData" :key="index" style="border: 1px solid #dddddd;margin-bottom: 20px;padding: 50px;">
          <el-col>
            <div :id="`printX${index}`" class="print-body">
              <div class="line line-1">
                <p class="ele ting-name">{{ ele.ting_name }}</p>
                <p class="ele zhu-time">{{ ele.play_time }}</p>
                <p class="ele fu-ting">{{ ele.ting_name }}</p>
              </div>

              <div class="line lin-2">
                <p class="ele pian-name">{{ ele.film_name }}</p>
              </div>

              <div class="line line-3">
                <p class="ele zhu-zuo-wei">{{ ele.seat_num }}</p>
                <p class="ele zhu-price">{{ ele.price }}</p>
                <p class="ele fu-time">{{ ele.play_time }}</p>
              </div>

              <div class="line line-4">
                <p class="ele zhu-type">{{ ele.pian_type == 1 ? '成人票':ele.pian_type == 2 ? '儿童票':'会员票' }}</p>
                <p class="ele zhu-server">{{ ele.server_price }}</p>
              </div>

              <div class="line line-5">
                <p class="ele create-time">{{ ele.create_time }}</p>
                <p class="ele gong-hao">{{ ele.operation_account }}</p>
                <p class="ele fu-zuo-wei">{{ ele.seat_num }}</p>
              </div>

              <div class="line lin-6">
                <p class="ele zhu-piao-hao">{{ ele.pian_num }}</p>
                <img class="ele qcode" src="@/assets/1562331850.png">
                <div class="col-1">
                  <p class="fu-piao-hao">{{ ele.pian_num }}</p>
                  <p class="fu-price">{{ ele.price }}</p>
                </div>
              </div>

              <div class="line lin-8"/>

            </div>
          </el-col>
          <el-col>
            <el-button v-print="`#printX${index}`">打印</el-button>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10">
        <el-button style="margin-top: 50px;margin-left: 50px;" @click="submitForm">确定完成打印</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import ElButton from '../../../node_modules/element-ui/packages/button/src/button.vue'
import { buy } from '@/api/pian'

export default {
  components: { ElButton },
  data() {
    return {
      buyData: [],
      stat: false
    }
  },
  created() {
    const params = this.$route.params

    this.buyData = params.buyData
    this.form = params.form

    console.info(params.form)
  },
  methods: {
    formatTime(time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    },

    submitForm() {
      this.$confirm('确定全部打印完毕？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        buy(this.form).then(response => {
          this.$store.dispatch('delAllViews').then(({ visitedViews }) => {
            // eslint-disable-next-line no-undef
            if (this.affixTags.some(tag => tag.path === view.path)) {
              return
            }
            this.toLastView(visitedViews)
          })

          this.$router.push({ path: '/pian/list?' + +new Date() })
        })
      }).catch(() => {

      })
    }
  }
}
</script>

<style lang="css">

  span,p{
    font-size: 12px;
    /*font-family: 文泉驿等宽微米黑;*/
    margin:0px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
  }

  .line{
    height:8mm;
    display: flex;
    /*border:1px solid red;*/
  }

  .line-1{
    height:10mm;
    margin-top: 18mm;
  }

  .ele{
    float: left;
  }

  .ting-name{
    width: 20mm;
    margin-left: 4mm;

  }

  .zhu-time{
    width:25mm;
    padding-left: 8mm;

  }

  .fu-ting{
    width:19mm;
    padding-left: 8mm;
    margin-top: -0.2mm;

  }

  .lin-2{
    height: 4mm;
    margin-top: -2mm;
  }

  .pian-name{
    width: 48mm;
    margin-left: 4mm;
  }

  .line-3{
    height: 7mm;
  }
  .zhu-zuo-wei{
    width: 20mm;
    margin-left: 4mm;
    padding-top: 2.5mm;

  }

  .zhu-price{
    width:20mm;
    margin-left: 10mm;
    padding-top: 3mm;

  }

  .fu-time{
    width:20mm;
    padding-left: 5mm;
  }

  .line-4{
    height:7mm;
  }

  .zhu-type{
    width: 20mm;
    margin-left: 4mm;
    padding-top: 2mm;
  }

  .zhu-server{
    width:20mm;
    margin-left: 10mm;
    padding-top: 0.5mm;
  }

  .line-5{
    height: 8mm;
  }
  .create-time{
    width: 18mm;
    margin-left: 8.5mm;
  }
  .gong-hao{
    width:21mm;
    margin-left: 10mm;
    padding-top: 2mm;
  }

  .fu-zuo-wei{
    width:20mm;
    margin-left: 1mm;
    padding-left: 3mm;
  }

  .lin-6{
    height: 25mm;
    margin-top: -1mm;
  }

  .zhu-piao-hao{
    width: 18mm;
    margin-left: 4mm;
    margin-top: 18mm;
    height: 8mm;
  }

  .qcode{
    width:20mm;
    height: 20mm;
    margin-left: 1mm;
  }

  .col-1{
    display: flex;
    flex-direction: column;
    height: 24mm;
    width:20mm;
    margin-top: 2mm;

  }
  .fu-piao-hao{
    margin-top: 7mm;
    width: 15mm;
    margin-left: 14mm;
  }

  .fu-price{
    margin-top: 7mm;
    margin-left: 16mm;
  }

  .lin-8{
    height: 0.1mm;
    width:0.5mm;
    border-bottom:0.1mm solid red;
    margin-top: 0.83mm;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .print-body{
    /*background-image: url("111.png");*/
    background-attachment: fixed;
    background-repeat:no-repeat;
    /*background-size: 20%;*/
    /*background-position: -1.2% -13%;*/
    margin-top: 0px;
    margin-left: 8px;
    display: flex;
    flex-direction: column;
  }

</style>

